<script setup lang="ts">
import { h, onMounted, ref } from 'vue'
import { NButton, NImage, NText } from 'naive-ui'
import { baseURL } from '@/utils/request'

import { useorderStatic } from '@/stores/orderStatic'

const _orderList = useorderStatic()

onMounted(async () => {
    await _orderList.getorderList()
    data.value = _orderList.orderStatic
    console.log(data.value)
})

const columns = [
    {
        title: '排名',
        key: 'num',
        width: 100,
        align: "center",
        render: (_: any, index: number) => {
            return `${index + 1}`;
        },
    },
    {
        title: '图片',
        key: "picture",
        align: "center",
        render(row: any) {
            return h(NImage, {
                width: 80,
                height: 80,
                src: `${baseURL}upload/${row.dishInfo[0].picture}`
            })
        }
    },
    {
        title: '菜品名称',
        key: 'dishInfo',
        render(rowData: object) {
            return h(
                NText,
                {

                },
                { default: () => rowData.dishInfo[0].name }
            )
        }
    },
    {
        title: '销售量',
        key: 'peopleNum'
    }
]


const data = ref([])

</script>

<template>
    <n-layout>
        <n-layout-header>最受欢迎的菜品TOP10</n-layout-header>
        <n-layout-content class="layout_content">
            <n-row gutter="12">
                <n-col :span="18">
                    <n-row gutter="12">
                        <n-col :span="3">
                            <div class="light-green">
                                <span>付款时间：</span>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true"> 本周 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true"> 上周 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true"> 本月 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-button text="true"> 上月 </n-button>
                            </div>
                        </n-col>
                        <n-col :span="2">
                            <div class="xxJB">
                                <n-date-picker type="daterange" clearable />
                            </div>
                        </n-col>
                    </n-row>
                </n-col>
                <n-col :span="3" class="chaxun">
                    <n-button type="tertiary"> 查询 </n-button>
                </n-col>
            </n-row>
        </n-layout-content>
    </n-layout>

    <n-data-table :columns="columns" :data="data" :bordered="false" />
</template>

<style scoped>
.jinri {
    margin-left: -18px;
}

.n-layout-header {
    background-color: #e9eff5;
    height: 45px;
    padding: 15px;
}

.n-button {
    background-color: #fff;
}

.row {
    background-color: #fff;
    padding: 15px;
}

.shu {
    background-color: red;
}

.top_left {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.col_right {
    margin-left: 60px;
}

.green {
    height: 108px;
    background-color: rgba(0, 128, 0, 0.24);
    margin: 15px 0;
    border-radius: 5px;
    color: #fff;
}

.space {
    padding: 18px;
}

.font {
    font-size: 30px;
}

.n-date-picker {
    width: 300px;
}

.layout_content {
    padding: 20px 15px;
    line-height: 34px;
    border-bottom: 1px solid #ccc;
}

.chaxun {
    right: -187px;
}
</style>
